<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  1- 前端的主要任务是什么？
      答：不建议：以更加友好的形式将数据展现给用户。
        用户体验。
  2- 如何提升用户体验。
      答：提升项目性能。
  3- 如何提升性能
      答：优化项目
  4- 如何优化项目：
      答：两个方面入手：
      4-1：加载优化
            * 减少HTTP请求
                当通过网络请求资源到渲染结束这个过程：
                    查找DNS-->TCP三次握手-》客户端向服务端发送请求-》服务端接收请求，还要返回响应
                    -》客户端需要接收响应-》生成DOM->渲染-》断开连接
                如何减少？合并图片，合并JS,vuex redux
            * 服务端渲染
                * 前后端分离：
                    客户端发起请求，
                    服务端给予响应（HTML结构），
                    客户端得到响应之后解析HTML结构，渲染界面
                    加载JS
                    发送AJAX请求
                    更新视图
                * 服务端渲染：
                    客户端发起请求
                    服务端给予响应（HTML结构+数据），
                    客户端对接收的HTML解析，生成DOM,渲染界面。
            * 静态资源使用CDN加载
                CDN是网络分发系统。在全球不同位置拥有web服务器。服务器离用户越近访问速度越快。
            * CSS写头部，JS写尾部
                css和JS如果写到头部会对HTML进行阻塞。如果CSS,JS加载慢，会长时间停留在空白界面。
                为什么CSS还要放到头部？
                答：css如果放置到尾部，在加载HTML的时候是没有样式的（丑陋）
            * 文字图标代替图片图标
                答：文字图标是矢量图，不会失真。文字图标小
            * 图片优化
                1- 延迟加载：先将可视图区域需要展现的图片进行加载。
                2- 降低图片清晰度：100%  80%
                3- 能用CSS3解决的就不要依托图片。
            * 通过WEBPACK实现懒加载（按需加载）
                * 只加载页面所需要的一些内容
            * 有效使用缓存。
      4-2：执行优化
            * 减少重排重绘
                尽旦不要操作style,操作class
            * 使用事件委托
            * if-else if  用switch
            * 减少css获取DOM的复杂度。
            * 布局flex
            * 不要覆盖原生方法。

</body>

</html>